"use client";
import image from "/img(3)/image.png";
import image1 from "/img(1)/image(1).png";
import image2 from "/img(4)/image(1).png";
import image3 from "/img(4)/image(2).png";
import image4 from "/img(4)/image.png";
import "./shou.css";
import { useNavigate } from "react-router-dom";
import { NavBar } from "antd-mobile";
const products = [
  {
    id: 1,
    name: "善托 霉拮吸入粉雾剂",
    image: image1,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
  },
  {
    id: 2,
    name: "美林 布洛芬小儿混悬液",
    image: image2,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
  },
  {
    id: 3,
    name: "小儿咳喘灵口服液",
    image: image3,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
  },
  {
    id: 4,
    name: "善托 霉拮吸入粉雾剂",
    image: image1,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
  },
  {
    id: 5,
    name: "美林 布洛芬小儿混悬液",
    image: image4,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
  },
];

export default function Xianshi() {
  const navigate = useNavigate();
  const back = () => {
    navigate(-1);
  }
  return (
    <div>
      <div>
        <NavBar onBack={back}>
          <h3
            style={{
              textAlign: "center",
              fontSize: 28,
              fontWeight: 700,
              color: "#3b3b3b",
              letterSpacing: 2,
              marginBottom: 36,
              textShadow: "0 2px 8px rgba(60,60,100,0.08)",
            }}
          >
            推荐列表
          </h3>
        </NavBar>
        <img
          src={image}
          alt=""
          style={{
            width: "100%",
            height: "100%",
          }}
        />
      </div>
      <div className="product-list">
        {products.map((item) => (
          <div className="product-card" key={item.id}>
            <img className="product-img" src={item.image} alt={item.name} />
            <div className="product-info">
              <div className="product-title">{item.name}</div>
              <div className="product-desc">{item.desc}</div>
              <div className="product-prices">
                <span className="product-price">￥{item.price.toFixed(2)}</span>
                <span className="product-oldprice">
                  ￥{item.oldPrice.toFixed(2)}
                </span>
              </div>
              <div className="product-extra">
                <span className="product-stock">仅剩{item.stock}件</span>
                <button
                  className="product-btn"
                  onClick={() => {
                    navigate(`/xiangq/${item.id}`);
                  }}
                >
                  马上抢
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
